/*
    配置 webpack 文件
 */
const path = require('path');
const webpack = require('webpack'); //启用热更新第二步
const htmlWebpackPlugin = require('html-webpack-plugin');//更新html渲染页面
const vueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode : 'development',
    entry : path.join(__dirname, './src/main.js'),
    output : {
        filename : 'bundle.js',
        path : path.join(__dirname, './dist'),
    },
    /*
        1) 源码映射会单独生成一个 sourcemap 文件, 出错了 会标识当前报错的列和行 大和全
        devtool:'source-map', //增加映射 文件可以 帮我们调试源代码
        2) 不会产生单独的文件, 但是可以显示行和列
        devtool : 'eval-source-map',
        3) 不会产生列,但是是一个单独的映射文件
        devtool : 'cheap-module-source-map', //产生后你可以保留起来
        4) 不会产生文件 集成在打包的文件中, 不会产生列
        devtool : 'cheap-module-eval-source-map',
     */
    devtool : 'eval-source-map',
    devServer : {
        open : true , //是否打开浏览器自动跳转
        port : 8899, ////设置浏览器指定端口
        hot : true, //启用热更新第一步
        host : '192.168.1.8'
    },
    plugins : [
        new webpack.HotModuleReplacementPlugin(), //启用热更新
        new htmlWebpackPlugin({
            template : path.join(__dirname, './src/index.html'),//指定模板文件路径
            filename : 'index.html',//设置生成的内存页面的名称
        }),
        new vueLoaderPlugin(),//设置 Vue 模块插件
    ],
    module : { //配置第三方loader
        rules : [//第三方loader的规则
            {test : /\.css$/, use : ['style-loader', 'css-loader']},//处理css 文件
            {test : /\.less$/, use : ['style-loader', 'css-loader', 'less-loader']},//处理css 文件
            {test : /\.scss$/, use : ['style-loader', 'css-loader', 'sass-loader']},//处理scss 文件
            {test : /\.(png|jpg|gif|bmp|jpeg)$/, use : 'url-loader?limit=30000&name=[hash:16]-[name].[ext]'}, //处理图片路径的loader
            //limit 给定的值是图片的大小,单位是 byte ,如果我们引用的图片,大于或等于给定的 limit 值,则不会被转为 base64格式的字符串,如果图片小于给定的 limit 值,是会被转为 base64 的字符串
            // &name=[hash:16]-[name].[ext] 处理图片名称, [name] 为图片的原名, [ext] 为后缀, [hash:4] 为hash值的四位
            {test : /\.(ttf|eot|svg|woff|woff2|otf)$/, use : 'url-loader'}, //处理字体文件的loader

            {test : /\.js$/, use : 'babel-loader', exclude: /node_modules/},//配置 Babel 来转换高级的ES语法
            {test : /\.vue$/, use : 'vue-loader'} //处理vue 文件
        ],
    },
    resolve: {//第二种方法
        alias : { //设置 Vue 被导入时候的包的路径
            // "vue$" : "vue/dist/vue.js"
        }
    }
};